<template>
	<view class="chart-info">
		<Card title="基本信息">
			<view class="info-item">
				<view class="info-item-label">主题</view>
				<text class="info-item-value">{{ currItem.ztnr }}</text>
			</view>
			<view class="info-item">
				<view class="info-item-label">请求对象</view>
				<text class="info-item-value">{{ currItem.qqdx }}</text>
			</view>
			<view class="info-item">
				<view class="info-item-label">请求时间</view>
				<text class="info-item-value">{{ currItem.qqsj }}</text>
			</view>
			<view class="info-item">
				<view class="info-item-label">类别</view>
				<t-tag variant="light" :theme="currItem.jjcd == '系统' ? 'danger' : 'primary'">{{ currItem.jjcd }}</t-tag>
			</view>
		</Card>
		<Card title="请求人">
			<view class="info-item">
				<view class="info-item-label">民警姓名</view>
				<text class="info-item-value">{{ currItem.cjrmc }}</text>
			</view>
			<view class="info-item">
				<view class="info-item-label">民警警号</view>
				<text class="info-item-value">{{ currItem.cjrjh }}</text>
			</view>
			<view class="info-item">
				<view class="info-item-label">民警单位</view>
				<text class="info-item-value">{{ currItem.zzmc }}</text>
			</view>
			<view class="info-item">
				<view class="info-item-label">民警电话</view>
				<text class="info-item-value">{{ currItem.cjrlxdh }}</text>
			</view>
		</Card>
    <Card title="请求进度">
      <t-steps :current="currStep" :current-status="currStepIcon" readonly>
        <t-step-item v-for="(item, index) in stepList" :key="index" :title="item.title" />
      </t-steps>
    </Card>
		<Card title="详细内容">
			<view class="textarea">{{ currItem.nrms }}</view>
		</Card>
	</view>
</template>

<script setup>
	import { ref, defineProps, computed } from "vue"
	import Card from '@/components/Card'
	const props = defineProps({
		currItem: {}
	})
  const suatusStepMap = [
    { title: '发起', value: 2 },
    { title: '驳回', value: 4 },
    { title: '处理', value: 5 },
    { title: '分发', value: 6 },
    { title: '办结', value: 7 },
  ]
  const stepList = computed(() => {
    console.log(props.currItem.ztzt);
    
    if (props.currItem.ztzt == 4) return suatusStepMap.filter(item => item.title != '处理');
    return suatusStepMap.filter(item => item.title != '驳回')
  })
  const currStep = computed(() => {
    return stepList.value.findIndex(item => item.value == props.currItem.ztzt);
  })
  const currStepIcon = computed(() => {
    if (props.currItem.ztzt == 4) return 'error';
    if (props.currItem.ztzt == 7) return 'finish';
    return 'process';
  })
  // const stepList2 = ref([
  //   { title: '发起', value: 2 },
  //   { title: '驳回', value: 4 },
  //   { title: '处理', value: 5 },
  //   { title: '分发', value: 6 },
  //   { title: '办结', value: 7 },
  // ])
</script>

<style lang="scss" scoped>
.chart-info {
	display: flex;
	flex-direction: column;
	row-gap: 12px;
		
	.info-item {
		font-size: 15px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		
		&-label {
			width: 80px;
			min-width: 80px;
			color: #666666;
		}
		
		&-value {
			color: #444444;
			flex: 1;
			display: flex;
			justify-content: flex-end;
		}
	}
	
	.textarea {
		font-size: 15px;
		color: #444444;
		line-height: 1.5;
	}
}
</style>